<template>
  <div class="rights">
  
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-table
    :data="list"
    stripe
    border=""
    style="width: 100%">
    
     <el-table-column
      type="index"
      label="#"
     >
    </el-table-column>
    <el-table-column
      prop="authName"
      label="权限名称"
      width="480">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      width="480">
    </el-table-column>
   
    <el-table-column
      prop="level"
      label="权限等级"
      width="480"
      >
       <template slot-scope="scope">
    
  <el-button type="primary" plain v-if="scope.row.level==='0'"> 一级</el-button>
  <el-button type="success" plain v-if="scope.row.level==='1'">二级</el-button>
  <el-button type="info" plain v-if="scope.row.level==='2'">三级</el-button>
      </template>
    </el-table-column>
 
  </el-table>
   </el-card>


  </div>
</template>
<script>

  
export default {
name:'Rights',
  data() {
    return{
      list:[],
    }
  },
  components:{
   
  },
  created(){
   this.getlist()
  },
  methods:{
    getlist(){
      this.$http.get('rights/list').then(res=>{
        // console.log(res.data.data);
        this.list=res.data.data
      })
    }
  }
}
</script>


<style lang="less" scoped>
.box-card{
margin-top: 20px;
}
</style>
